<template>
	<div ref="supplierel">
		<div v-if="!hideNext">
			<up-scroll-list
				title-t="slotsall.providers"
				icon="provider"
				icon-color="var(--color-primary)"
				:total="list?.length"
				:seeAll="seeAll"
				@seeAll="handleSeeAll"
				:multiple="isDesktop ? 2 : 3">
				<div
					:params="{ id: item?.developerSlug }"
					:style="`width:${itemWidth}px; height: ${(itemWidth / 220) * 105}px;`"
					v-for="(item, index) in list"
					:key="index"
					class="app-hover-offset bg-[#212834] rounded-[10px] flex justify-center items-center">
					<base-image
						class="w-full h-full object-fill rounded-[10px]"
						:class="item.displayType === 0 || item.isComming === 0 ? '' : 'cursor-not-allowed'"
						v-if="item.iconPath"
						type="network"
						:src="item.iconPath" />
				</div>
			</up-scroll-list>
		</div>
		<div v-else>
			<div class="flex items-center">
				<header-title titleT="slotsall.providers"></header-title>
			</div>
			<base-loading-box
				class="min-h-[150px] w-full mt-[10px]"
				:isEmpty="isEmpty"
				:error="error"
				:loading="loading">
				<n-grid :y-gap="24" :x-gap="isDesktop ? 16 : 9" :cols="currentCols">
					<n-gi
						v-for="(item, index) in list"
						:key="index"
						class="app-hover-offset h-[52px] md:h-[104px]">
						<!-- 供应商背景不参与换肤 -->
						<base-router
							name="casinoProviderDetail"
							:params="{ id: item?.slug }"
							@click="goSupplier(item)"
							class="bg-[#212834] rounded-[10px] flex justify-center items-center h-full">
							<!-- <base-image
								class="w-full h-full object-fill rounded-[10px]"
								:class="item.displayType === 0 || item.isComming === 0 ? '' : 'cursor-not-allowed'"
								v-if="item.providerIcon"
								type="network"
								:src="item.providerIcon" /> -->
							<base-image
								class="w-full md:p-[18px] p-[5px] h-full object-contain"
								:class="item.fullGameName || item.gameKey ? 'cursor-pointer' : ''"
								:src="item.iconPath"
								default="placeholder-higher.svg"
								type="network"></base-image>
						</base-router>
					</n-gi>
				</n-grid>
			</base-loading-box>
		</div>
	</div>
</template>
<script lang="ts" setup>
import HeaderTitle from '../common/header-title.vue'
import { ref, onMounted, computed, watch } from 'vue'
import type { Ref } from 'vue'
import { useListCols } from '@/hooks'
import { useRouter } from 'vue-router'
import { BaseImage, BaseLoadingBox, BaseRouter } from '@/components/base'
import { getCasinoProvidersData } from '@/api/casino'
import { getProvidersData } from '@/api/slots'
import { getAllProviderList } from '@/api/other'
import { useElementSize } from '@vueuse/core'
import { useSlotStore, useCasinoStore, useAppStore } from '@/store'
import { UpScrollList } from '@/components/up'
import { NGi, NGrid } from 'naive-ui'
import { useRequest } from '@/hooks'
import { isDesktop } from '@/hooks/useIsPC.ts'
const supplierel = ref(null)
const list: Ref<any[]> = ref([])
const slotStore = useSlotStore()
const casinoStore = useCasinoStore()
const { colsMedium } = useListCols(supplierel)
const router = useRouter()
const appStore = useAppStore()

const { width } = useElementSize(supplierel)

const props = defineProps({
	type: {
		type: String,
		default: 'slots'
	},
	defaultCols: {
		type: Number,
		default: 0
	},
	hideNext: {
		//true: display in 1 row
		type: Boolean,
		default: false
	},
	seeAll: {
		type: Boolean,
		default: false
	}
})

const currentCols = computed(() => {
	let col = colsMedium.value
	return col
})

const itemWidth = computed(() => {
	if (width.value && currentCols.value) {
		return (width.value - (currentCols.value - 1) * 10) / currentCols.value
	}
	return 200
})
const selectAPI = () => {
	if (props.type === 'slots') {
		return getProvidersData
	} else if (props.type === 'casino') {
		return getCasinoProvidersData
	} else {
		return getAllProviderList
	}
}
const { run, data, error, loading, isEmpty } = useRequest<any>(selectAPI(), { pageSize: 40 })

const getList = async () => {
	await run({})
	if (props.type === 'slots') {
		slotStore.setProviderList(data.value)
		list.value = data.value || []
	} else if (props.type === 'casino') {
		casinoStore.setProviderList(data.value?.list)
		list.value = data.value?.list || []
	} else {
		list.value = data.value?.items || []
	}
	list.value.sort((a: any, b: any) => a.sort - b.sort)
}

const handleSeeAll = () => {
	router.push({
		path: '/casino/providers'
	})
}

// const formatProviderName = (name: any) => {
// 	if (name === 'Evolution') {
// 		return 'evo'
// 	} else if (name === 'AsiaGaming') {
// 		return 'ag'
// 	}
// }

const goSupplier = (item: any) => {
	if (props.type === 'casino' && item.isComming === 0) {
		router.push({
			name: 'CasinoProviderDetail',
			params: {
				// id: formatProviderName(item.providerName)
				id: item.pid
			},
			query: {
				type: 'all'
			}
		})
	}
	if (props.type === 'slots' && item.displayType === 0) {
		router.push({
			name: 'SlotsProviderDetail',
			params: {
				id: item.id
			},
			query: {
				type: 'popular'
			}
		})
	}
}

watch(
	() => appStore.region,
	() => {
		getList()
	}
)

onMounted(() => {
	getList()
})
</script>
